<template>
  <view class="pr_page">
    <!-- 骨架屏加载 -->
   <view v-if="!loadingss" class="skeleton-container">
      <view class="skeleton-item" v-for="(_, index) in 2" :key="index"></view>
    </view>

    <!-- 实际列表 -->
    <view v-if="loadingss" class="pr_list">
      <view
        class="pr_itme"
        v-for="(itme, index) in PrList"
        :key="index"
        :class="{ 'fade-in': loadingss }"
      @click="Navigator(itme.id)"
	  >
        <view class="corve_img">
          <image :src="'https:' + itme.coverImage" mode="aspectFill"></image>
        </view>
        <view class="conten">
          <view class="title">{{itme.name}}</view>
          <view class="money">￥{{itme.price | priceFormat}}</view>
          <view class="jfsum">
            <view class="sum">
              <image src="/static/home/js.png" mode="widthFix"></image>
              <view>{{itme.credit | priceFormat}}</view>
            </view>
            <view class="btn">兑换</view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      loadingss: true, // 加载完成状态
    };
  },
  props: {
    PrList: {
      type: Array,
      default: [],
    },
	isLoaded: { type: Boolean, default: false },
  },
  watch: {
      isLoaded(newVal) {
		  console.log(newVal , this.PrList.length)
        if (newVal && this.PrList.length) {
          this.loadingss = true;
        }
      },
    },
  mounted() {
    // 模拟接口请求（实际需在获取数据后设置 loadingss）
    // setTimeout(() => {
    //   this.loadingss = true;
    // }, 1500);
  },
  methods:{
	  Navigator(id){
		  uni.navigateTo({
		  	url:`/pages/points/details?id=${id}`
		  })
	  }
  }
};
</script>

<style lang="scss" scoped>
.pr_page {
  padding: 10rpx 0;
  box-sizing: border-box;
  background-color: #f8f8f8;

  .skeleton-container {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 20rpx;
    padding: 20rpx 0;

    .skeleton-item {
      width: 48.2%;
      height: 380rpx;
      background-color: #f0f0f0;
      border-radius: 20rpx;
      animation: skeleton-loading 1.5s infinite;
    }
  }

  .pr_list {
    display: flex;
    flex-wrap: wrap;
    gap: 24rpx;
    padding-bottom: 20rpx;

    .pr_itme {
      width: 48.2%;
      background-color: #fff;
      border-radius: 20rpx;
      overflow: hidden;
      opacity: 0;
      transform: translateY(20rpx);
      animation: fadeInUp 0.5s ease forwards;
      animation-delay: calc(var(--index) * 0.1s); // 配合 JS 设置索引

      &:nth-child(even) {
        animation-delay: calc(var(--index) * 0.15s); // 奇偶项延迟差异
      }

      .corve_img {
        width: 100%;
        height: 250rpx;
        image {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
      }

      .conten {
        padding: 20rpx 30rpx 30rpx 20rpx;
        .title {
          font-size: 30rpx;
          font-weight: 600;
          margin-bottom: 6rpx;
		  white-space: nowrap;
		  overflow: hidden;
		  text-overflow: ellipsis;
		  width: 300rpx;
        }
        .money {
          font-size: 26rpx;
          color: #525252;
        }
        .jfsum {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-top: 20rpx;
          .sum {
            display: flex;
            align-items: center;
            color: #af1c1c;
            font-size: 32rpx;
            font-weight: bold;
            image {
              width: 32rpx;
              margin-right: 10rpx;
            }
          }
          .btn {
            width: 95rpx;
            height: 50rpx;
            border-radius: 70rpx;
            background-color: #ec681b;
            color: #fff;
            text-align: center;
            line-height: 50rpx;
            font-size: 28rpx;
          }
        }
      }
    }
  }
}

@keyframes skeleton-loading {
  0% { background-color: #f0f0f0; }
  50% { background-color: #f8f8f8; }
  100% { background-color: #f0f0f0; }
}

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(20rpx); }
  to { opacity: 1; transform: translateY(0); }
}
</style>